<template>
  <div class="rightNav.vue">
    <div class="brief_content_left">
      <div>
        <div class="brief_left_btn">
          <zdyBtn
            :title="'企业简介'"
            :width="'261px'"
            :height="'49px'"
          ></zdyBtn>
        </div>
        <div class="brief_left_content">
          <ul class="content_list">
            <li
              v-for="item in navList"
              :key="item.id"
              @click="handNav(item.id)"
              :style="{color:item.id==activeId?'#E6142F':'#000000'}"
              class="content_item pointer"
            >{{item.name}}</li>
          </ul>
        </div>
      </div>
      <div class="brief_left_serve">
        <zdyBtn
          :title="'服务热线'"
          :width="'261px'"
          :height="'49px'"
        ></zdyBtn>
        <div class="serve_box">
          <div class="serve_phone_box">
            <div class="serve_phone">
              <img
                class="phone_img"
                src="../assets/imges/phone.png"
                alt=""
              >
            </div>
            <div class="phone_num_box">
              <p
                class="phone_num"
                style="margin-bottom: 15px"
              >电话:</p>
              <p class="phone_num">0376-6226789 </p>
            </div>
          </div>
          <div class="the_phone">
            <div class="the_phone_off">

            </div>
            <div class="the_phone_title">
              The&nbsp; &nbsp;phone
            </div>
            <div class="the_phone_off">

            </div>
          </div>

        </div>

      </div>
    </div>
  </div>
</template>

<script>
import zdyBtn from "@/components/zdyBtn.vue";
export default {
  components: {
    zdyBtn
  },
  name: "rightNav.vue",
  props: {
    navList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      activeId: 0
    };
  },
  methods: {
    handNav(id) {
      this.activeId = id;
      console.log(id);
    }
  }
};
</script>

<style lang='scss' scoped>
.brief_content_left {
  width: 261px;
  background: rgba(255, 255, 255, 1);
  .brief_left_serve {
    margin-top: 20px;
    .serve_box {
      border: 1px solid rgba(204, 204, 204, 1);
      border-top: 0;
      padding: 40px 29px 0 29px;
      .the_phone {
        display: flex;
        align-items: center;
        margin-top: 38px;
        margin-bottom: 40px;
        .the_phone_off {
          width: 53px;
          height: 1px;
          // border: 1px solid rgba(204, 204, 204, 1);
          background-color: rgba(204, 204, 204, 1);
        }
        .the_phone_title {
          font-size: 14px;
          font-weight: 400;
          margin-right: 10px;
          margin-left: 10px;
          color: rgba(128, 128, 128, 1);
        }
      }
      .serve_phone_box {
        display: flex;
        align-items: center;
        .phone_num_box {
          margin-left: 21px;
          .phone_num {
            color: #808080;
            font-size: 18px;
          }
        }

        .serve_phone {
          width: 51px;
          height: 51px;
          background: rgba(255, 255, 255, 1);
          border: 2px solid rgba(18, 150, 219, 1);
          border-radius: 50%;
          position: relative;
          .phone_img {
            width: 25px;
            height: 25px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -12.5px;
            margin-left: -12.5px;
          }
        }
      }
    }
  }
  .brief_left_content {
    // height: 162px;
    border: 1px solid rgba(204, 204, 204, 1);
    border-top: 0;
    width: 100%;
    padding-right: 13px;
    padding-left: 13px;
    .content_list {
      margin-bottom: 20px;
      .content_item {
        width: 100%;
        padding-top: 15px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eeeeee;
        text-align: center;
        color: #333333;
        font-size: 16px;
      }
    }
  }
}
</style>
